<template>
  <div>
    <!-- 获取文件列表 -->
    <div>
      <button @click="returnList">返回文件列表</button>
    </div>
    <!-- 上传文件 -->
    <div style="margin-top:50px">
      <input id="fileSelector" type="file" name="filename" />
      <button @click="submit">提交</button>
    </div>
    <!-- 下载文件 -->
    <div style="margin-top:50px">
      <button @click="jump">下载文件</button>
    </div>
    <!-- 删除文件 -->
    <div style="margin-top:50px">
      <button @click="dele">删除文件</button>
    </div>
  </div>
</template>

<script>
import COS from "cos-js-sdk-v5";
import $ from "jquery";
export default {
  data() {
    return {
      uploadFile: "",
      uploadFileName: "",
      location: "",
      identifier:"1"
    };
  },
  methods: {
    select() {
      // 获取上传文件的信息
      this.uploadFile = document.getElementById("fileSelector").files[0];
      this.uploadFileName = this.uploadFile.name;
      console.log("file:" + this.uploadFile);
      console.log("fileName:" + this.uploadFileName);
    },
    // 身份认证
    getCOS() {
      var cos = new COS({
        AppId: "1304114494",
        SecretId: "AKIDwhU5nHLegU7C5rloQmslkVZOyRgrElU4",
        SecretKey: "d5SdcLMI7IKHzUxDEIAbstnTfIvsa3HJ"
      });
      return cos;
    },

    // 返回文件列表
    returnList() {
      var cos = this.getCOS();
      cos.getBucket(
        {
          Bucket: "mybucket-1304114494",
          Region: "ap-guangzhou",
          // 路径, 返回数组的第一个元素为文件夹
          Prefix: ""
        },
        function(err, data) {
          // 打印返回数据中的内容
          console.log(err || data.Contents);
        }
      );
    },

    // 上传文件
    submit() {
      this.select();
      var cos = this.getCOS();
      var that = this;
      console.log("uploadFileName:"+this.uploadFileName);
      cos.putObject(
        {
          Bucket: "mybucket-1304114494",
          Region: "ap-guangzhou",
          // 唯一标识文件的key：前面为文件夹，后面为文件名
          Key: that.identifier+"/"+that.uploadFileName,
          StorageClass: "STANDARD",
          Body: that.uploadFile, // 上传文件对象
          // 进度回调函数
          onProgress: function(progressData) {
            console.log(JSON.stringify(progressData));
            // progressData.total 整个文件的大小
            // progressData.loaded 已上传文件内容大小， progressData.speed 上传文件速度， progressData.percent 上传文件百分百
            //console.log(progressData.total);
          }
        },
        function(err, data) {
          // 这里是打印文件的保存路径
          console.log(data);
          that.location = data.Location;
        }
      );
    },

    // 下载文件
    jump() {
      console.log("location:" + this.location);
      // 下载文件的路径
      var url = "https://";
      var address = this.location;
      window.location.href = url + address;
    },

    // 删除单个文件
    // dele() {
    //   console.log("点击了删除按钮");
    //   var that = this;
    //   var cos = this.getCOS();
    //   cos.deleteObject(
    //     {
    //       Bucket: "mybucket-1304114494",
    //       Region: "ap-guangzhou" /* 必须 */,
    //       // 保存文件时的key，可以一次性删除多个，看下面的函数dele2()
    //       Key: "test/folder/test.docx"
    //     },
    //     function(err, data) {
    //       console.log(err || data);
    //       that.returnList();
    //     }
    //   );
    // },

    // 可以删除单个文件也可以删除多个文件
    dele() {
      console.log("点击了删除按钮2");
      var that = this;
      var cos = this.getCOS();
      cos.deleteMultipleObject(
        {
          Bucket: "mybucket-1304114494",
          Region: "ap-guangzhou" /* 必须 */,
          // 保存文件时的key，可以一次性删除多个，看下面的函数dele2()
          Objects: [
            { Key: "1/座位表.xlsx" },
            //{ Key: "118卓越2班上课实际人数登记表.xlsx" }
          ]
        },
        function(err, data) {
          console.log(err || data);
          that.returnList();
        }
      );
    }
  }
};
</script>

<style scoped>
</style>



